<template>

    <a-form ref="formRef" :model="value" :rules="rules" :labelCol="{ style: { width: '120px' } }">
        <a-row :gutter="[24, 24]">

            <a-col :span="24">
               
                <a-form-item label="选择商品" name="orderGoodsList" required>
                    <ManyGoodsInput v-model:list="value.orderGoodsList" ></ManyGoodsInput>
                   
                </a-form-item>
              
            </a-col>

           

            <a-col :span="24">
                <a-form-item label="总金额" >
                    {{ getAmount() / 100 }} 元
                </a-form-item>
            </a-col>


            <a-col :span="8">
                <a-form-item label="所属项目" name="projectId" required>
                    <ProjectInput v-model:project-id="value.projectId" 
                    v-model:project-name="value.project!.name" 
                    v-model:project="value.project"></ProjectInput>
                </a-form-item>
            </a-col>


            <a-col :span="24">
                <a-form-item label="备注信息" name="remark">
                    <a-textarea :maxlength="500" :showCount="true" v-model:value.trim="value.remark"
                        placeholder="请输入备注信息" :rows="5" />
                </a-form-item>
            </a-col>

        </a-row>
    </a-form>


</template>
<script setup lang="ts">
import type { Order } from '@/types/Order';
import { ref } from 'vue';

import uploadImg from '@/components/uploadImg.vue'

import { useTabStore } from '@/stores/tab'


import { useOrderStore } from '@/stores/order'

import type { Rule } from 'ant-design-vue/es/form';
import AreaInput from '@/components/areaInput.vue';
import GoodsInput from '@/components/goodsInput.vue';
import ProjectInput from '@/components/projectInput.vue';
import ManyGoodsInput from '@/components/manyGoodsInput.vue';

const orderStore = useOrderStore()
const tabStore = useTabStore()
const value = defineModel<Order>('value', { default: {} })
const formRef = ref()

const rules: Record<string, Rule[]> = {
    orderGoodsList: [{
        required: true, trigger: 'change', validator: async () => {
            if(!value.value.orderGoodsList){
                return Promise.reject("请选择商品");
            }
            if(value.value.orderGoodsList.length == 0){
                return Promise.reject("请选择商品");
            }

            for(let item of value.value.orderGoodsList){
                if(!item.goodsId){
                    return Promise.reject("请选择商品");
                }
                if(!item.goodsNum){
                    return Promise.reject("请输入数量");
                }
            }
            

            return Promise.resolve();
        },
    }],

};

const getAmount = () => {
    
    if(!value.value.orderGoodsList){
        return 0
    }
    let amout = 0
    for(let item of value.value.orderGoodsList){
        if(!item.goodsNum){
            continue
        }
        if(!item.goodsPrice){
            continue
        }
        amout += item.goodsNum * item.goodsPrice
    }
    return amout
}

const validate = async () => {
    await formRef.value.validate();
};
const resetFields = () => {
    formRef.value.resetFields();
};
defineExpose({
    validate,
    resetFields,
});
</script>
<style scoped></style>